/* 引入依赖模块 */
// path
const path = require('path');
// 模板插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// vue 加载机插件
const VueLoaderPlugin = require('vue-loader/lib/plugin');
// 样式拆分插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

/* 配置 */
module.exports = {
    // 解决问题
    resolve: {
        // 设置默认拓展名
        extensions: ['.js', '.vue'],
        // 设置默认路径或别名
        alias: {
            // 设置前端使用 vue 模块的默认路径
            vue$: 'vue/dist/vue.js',
            // @ 代表 src
            '@': path.join(process.cwd(), './src'),
            '@c': path.join(process.cwd(), './src/components'),
            '@p': path.join(process.cwd(), './src/pages')
        }
    },
    // 入口
    entry: path.join(process.cwd(), 'src', 'main.js'),
    // 发布
    output: {
        // 发布资源相对路径
        path: path.join(process.cwd(), 'public'),
        // 文件发布
        filename: './js/[name].js',
        // 设置资源相对路径
        publicPath: '/public/'
    },
    // 模块
    module: {
        // 加载机
        rules: [
            // ES6+
            {
                test: /\.js$/,
                loader: 'babel-loader',
                // 包含路径
                include: '/src/',
                // 配置
                options: {
                    // 编译器
                    presets: ['@babel/preset-env'],
                    // 异步加载
                    plugins: ['@babel/plugin-syntax-dynamic-import']
                }
            },
            // vue
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            // sass/scss/css
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    // 存为单独 css 文件，style-loader 则会生成内联样式表
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            },
            // less
            {
                test: /\.less$/,
                use: [
                    // 存为单独 css 文件，style-loader 则会生成内联样式表
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader'
                ]

            },
            // 字体图标
            {
                test: /\.(ttf|woff)$/,
                loader: 'url-loader'
            }
        ]
    },
    mode: 'development',
    // 插件
    plugins: [
        // 模板处理
        new HtmlWebpackPlugin({
            // 模板文件位置
            template: path.join(process.cwd(), 'src', 'template', 'index.html'),
            // 发布位置
            filename: path.join(process.cwd(), 'views', 'index.html'),
            // 添加 hash
            hash: true
        }),
        // vue-loade
        new VueLoaderPlugin(),
        // 样式提取
        new MiniCssExtractPlugin({
            // 样式发布目录
            filename: './css/style.css'
        })
    ],
    // 优化配置
    optimization: {
        // 拆分库文件
        splitChunks: {
            // 缓存组
            cacheGroups: {
                // 库文件规则
                'lib': {
                    // 设置文件名
                    name: "lib",
                    // 匹配路径
                    test: /node_modules/,
                    // 模式
                    chunks: "all",
                    // 设置优先级
                    priority: 10
                }
            }
        }
    }
}